<template>
	<view class="tabs-wrap">
		<ListTools :total="count" :sedate="{st: stime, et: etime}" @selDate="selAlSeDate">
			<template>

			</template>
		</ListTools>


		<view style="display: flex;align-items: center; " class="other-btns">
			<view style="width: 60vw;background-color: #FFF;">
				<!-- <u-search @change='queryList()' bg-color='#fff' shape='square' :show-action='false' :placeholder="placeholder"
						v-model="details"></u-search> -->
				<u-input @input='queryList()' v-model="details" :border="true"
					:custom-style="{'backgroundColor': '#fff'}" :placeholder="placeholder" />
			</view>
			<view style="width: 40vw;margin-left: 20rpx;">
				<label class="lt-obtn" :class="{'lt-obtn-sel':findDay == 0}" @click="findDgByDay('0')">今天</label>

				<label class="lt-obtn" :class="{'lt-obtn-sel':findDay == 1}" @click="findDgByDay('1')">明天</label>

				<label class="lt-obtn" :class="{'lt-obtn-sel': findDay == 2}" @click="findDgByDay('2')">后天</label>
			</view>
		</view>
		<scroll-view :scroll-top="scrollTop" @scroll="scroll" style="height: 68vh;width: 100%;" scroll-y
			@scrolltolower="tabReachBottom" :refresher-enabled="true" :refresher-threshold="80"
			:refresher-background="'#efefef'" :refresher-triggered="load.triggered" @refresherrefresh="downPullRefres">
			<view class="my-list">
				<view class="no-data" v-if="dataList.length == 0"><u-empty text="没有订单数据" mode="list"></u-empty></view>
				<template v-else>
					<view class="ml-item" v-for="(it, index) in dataList" :key="it.id">
						<view class="i-title-row">
							<!-- <view class="check-state-text" :style="{'color': '#fff', 'background': 'red'}">
								{{it.status=='NOT_GRAB'?'未抢单':it.status=='READY_CAR'?'未派车':'状态'}}
							</view> -->

							<view class="r-title">
							<u-button v-if="it.isTrusteeOrder == 1" style="margin-right: 10rpx;" shape="square" type="error"
								size="mini" >托</u-button>
							{{it.routeSimpleName}} <text style="margin-left: 30rpx;color: red;">
									{{ it.status == 'NOT_GRAB' ? '未抢单' : it.status == 'READY_CAR' ? '未派车' :
								                                            it.status
								                                                ==
								                                                'CAR_READY_CONFIRME' ? '未通知' : it.status == 'DRIVER_READY_RECEIVE' ? '师傅未确认' :
								                                                it.status ==
								                                                    'DRIVER_CONFIRMED'
								                                                    ? '师傅已确认' : it.status == 'START_TAKE_CUS' ? '出发去接客户' : it.status ==
								                                                        'ON_ROADING' ?
								                                                        '已出行' :
								                                                        it.status == 'FINISHED' ? '已完团' : it.status == 'CANCELED' ? '已取消' : it.status
								                                                            ==
								                                                            'REFUSED'
								                                                            ?
								                                                            '已拒绝' : it.status == 'DELETE' ? '已删除' : '其他' }}
								</text>

							</view>
							<u-button v-if="it.isBaitui == 1" style="margin-right: 10rpx;" shape="square" type="error"
								size="mini">百推</u-button>
							<u-button v-if="it.accidentRecord" style="margin-right: 10rpx;" shape="square" type="error"
								size="mini" @click="showBzDetail(it.id)">异</u-button>
								
							

							<view class="r-detail-btn" @click="showBzDetail(it.id)">详情
								<u-icon name="arrow-right" color="#666"></u-icon>
							</view>

						</view>
						<view class="content">
							<view class="title" v-html="it.details"></view>
						</view>
						<view style="font-weight: 700;">
							<!-- {{it.cusName+'-'+it.cusMobile}} -->
							<view style='color: #4749a0;'>客户信息:{{it.cusInfo}}
								<text :style="it.regularCarMoney >0?'color: red':'color: #4749a0'">({{it.personNum}}人</text>
								<text :style="it.regularCarMoney >0?'color: red':'color: #4749a0'">/{{it.needSeats}}座)</text>
							</view>
						</view>
						<view class="bottom" v-if='isTrustee==0&&it.status !="CAR_READY_CONFIRME"'>

							<template v-if='it.status !="CAR_READY_CONFIRME"'>
								<view class="btn" @click="gotoUpdOrder(1, it)">修改订单</view>
								<!-- <view class="btn" @click="gotoUpdOrder(2, o)">临空时间</view> -->
							</template>
							<view v-if='it.status !="CAR_READY_CONFIRME"'
								:style="{'border-color': '#f00000', 'color': '#f00000'}" class="btn"
								@click="btn_car2(it)">
								线下派车
							</view>
							<view v-if='it.status !="CAR_READY_CONFIRME"'
								:style="{'border-color': '#008000', 'color': '#008000'}" class="btn"
								@click="btn_car(it)">
								线上派车
							</view>
							<view v-if='it.status !="CAR_READY_CONFIRME"'
								:style="{'border-color': '#f00000', 'color': '#f00000'}" class="btn"
								@click="del_car(it)">
								删除订单
							</view>
						</view>
						<view class="bottom"
							v-if='isTrustee==0&& it.orderSource !="WX_MP_CARTEAM"&& it.orderSource !="PC_CAR_TEAM"&& it.isUseTeamPriceTemplates =="0"&& it.isReceiveByTeam =="0"&& it.type !="2"'>
							<view
								v-if=' it.orderSource !="WX_MP_CARTEAM"&& it.orderSource !="PC_CAR_TEAM"&& it.isUseTeamPriceTemplates =="0"&& it.isReceiveByTeam =="0"&& it.type !="2"'
								:style="{'border-color': '#008000', 'color': '#008000'}" class="btn"
								@click="receiveOrRefuse_ok_btn(it)">
								确认订单
							</view>
							<view
								v-if=' it.orderSource !="WX_MP_CARTEAM"&& it.orderSource !="PC_CAR_TEAM"&& it.isUseTeamPriceTemplates =="0"&& it.isReceiveByTeam =="0"&& it.type !="2"'
								:style="{'border-color': '#f00000', 'color': '#f00000'}" class="btn"
								@click="receiveOrRefuse_on_btn(it)">
								拒绝订单
							</view>
						</view>


						<view v-if='it.status =="CAR_READY_CONFIRME"&& isTrustee==0' class="bottom2">
							<view style="font-weight: 700;">
								<view style='color: #ff5722;'>车辆信息:{{it.driverName}}
									<text style="color: red;">【{{it.plateNum}}】</text>
								</view>
							</view>
							<view :style="{'border-color': '#008000', 'color': '#008000'}" class="btn"
								@click="ok_btn_car(it)">
								确认派车
							</view>
						</view>
					</view>


					<u-loadmore :status="load.status" :load-text="load.loadText" bgColor="#f2f2f2"></u-loadmore>
				</template>

			</view>
		</scroll-view>
		<u-modal @confirm='ok_btn_car_show_btn' :show-cancel-button='true' v-model="ok_btn_car_show"
			:content="'是否确认派车?'"></u-modal>
		<u-modal @confirm='del_car_confirm' :show-cancel-button='true' v-model="del_car_off"
			:content="'是否删除订单?'"></u-modal>
		<u-modal @confirm='receiveOrRefuse_confirm' :show-cancel-button='true' v-model="receiveOrRefuse_off"
			:content="receiveOrRefuse_content"></u-modal>
	</view>
</template>

<script>
	import ListTools from '@/components/list-tools/list-tools.vue';
	export default {
		components: {
			ListTools,
		},
		data() {
			return {
				receiveOrRefuse_data: {
					id: '',
					isReceiveByTeam: '',
				},
				receiveOrRefuse_off: false,
				receiveOrRefuse_content: '',
				del_car_id: '',
				del_car_off: false,
				findDay: -1,
				ok_btn_car_data: {},
				ok_btn_car_show: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 开始时间
				stime: this.getMonthFirstDay(),
				// 结束时间
				etime: this.getMonthLastDay(),
				dataList: [],
				count: 0,
				// 列表加载更多对象
				page: {
					pageNum: 1,
					pageSize: 20,
				},
				placeholder: '请输入搜索关键字',
				details: '',
				load: this.U.scopy(this.C.loadmore),
				isTrustee: 0,
			}
		},
		onLoad(e) {
			console.log(e)
		},
		mounted() {
			// 查询
			this.queryList();
			this.isTrustee = uni.getStorageSync('isTrustee');

		},
		methods: {
			// 查询指定天数的数据
			findDgByDay(day) {
				let that = this
				let U = that.U
				if (that.findDay == day) {
					// 再次点击则取消
					that.findDay = -1;

					that.stime = that.getMonthFirstDay(),
						that.etime = that.getMonthLastDay(),

						that.downPullRefres();
				} else {
					that.findDay = day;
					that.stime = U.getSEToday(day)[0];
					that.etime = U.getSEToday(day)[1];
					that.downPullRefres();
				}
			},
			getMonthFirstDay() {
				// 获取当前日期
				let currentDate = new Date();

				// 提取年月日部分
				let year = currentDate.getFullYear();
				let month = String(currentDate.getMonth() + 1).padStart(2, '0');
				let day = String(currentDate.getDate()).padStart(2, '0');

				let todayString = `${year}-${month}-${day}`;
				let data = todayString + ' ' + '00:00:00'
				return data
			},
			getMonthLastDay() {
				// 获取当前日期
				let currentDate = new Date();

				// 加上7天的毫秒数
				let nextWeekDate = new Date(currentDate.getTime() + 1 * 24 * 60 * 60 * 1000);

				// 提取年月日部分
				let year = nextWeekDate.getFullYear();
				let month = String(nextWeekDate.getMonth() + 1).padStart(2, '0');
				let day = String(nextWeekDate.getDate()).padStart(2, '0');

				let nextWeekDateString = `${year}-${month}-${day}`;
				let data = nextWeekDateString + ' ' + '23:59:59'
				console.log(data, 'data')
				return data
			},
			/**
			 * 导航-修改订单页面
			 * @param {Object} type 操作类型 1-修改地点/出发时间 2-修改临空时间
			 * @param {Object} obj 	订单
			 */
			gotoUpdOrder(type, obj) {
				// console.log('修改数据', type, obj);

				if (type == 2) { // 修改临空时间
					uni.navigateTo({
						url: '/order-man/upd-empty-time/upd-empty-time?id=' + obj.id
					})
				} else { // 修改订单
					uni.navigateTo({
						url: '/order-man/upd-order/upd-order?id=' + obj.id
					})
					// this.$u.api.getOrderDetail({id: obj.id}).then(res =>{
					//  if(res.code == 1){
					//  	console.log(res)
					//  }
					// })

					// return
					// 	if (obj.dayRoutes.length > 1) {
					// 		uni.navigateTo({
					// 			url: '/order-man/order-day-route-list/order-day-route-list?id=' + obj.id
					// 		})
					// 	} else {
					// 	uni.navigateTo({
					// 		url: '/order-man/upd-order/upd-order',
					// 		success: function(res) {
					// 			let o = obj;
					// 			let d = obj.dayRoutes[0];

					// 			let p = {};
					// 			// 订单编号
					// 			p.orderNum = o.orderNum;
					// 			// 某天行程id
					// 			p.id = d.id;
					// 			// 行程开始时间
					// 			p.startTime = {
					// 				date: d.setime.st.split(' ')[0],
					// 				time: d.setime.st.split(' ')[1]
					// 			};
					// 			// 行程结束时间
					// 			p.endTime = {
					// 				date: d.setime.et.split(' ')[0],
					// 				time: d.setime.et.split(' ')[1]
					// 			};
					// 			// 开始地点
					// 			p.spoint = d.spoint;
					// 			// 上午行程
					// 			p.amps = d.amps || [];
					// 			// 午餐地点
					// 			p.lunchPoint = d.lunchPoint;
					// 			// 下午行程
					// 			p.pmps = d.pmps || [];
					// 			// 结束地点
					// 			p.epoint = d.epoint;
					// 			// 将当前修改的天数行程传递给修改页面
					// 			res.eventChannel.emit('pageData', {
					// 				drCount: 1,
					// 				data: p
					// 			});
					// 		}
					// 	});
					// }
				}
			},
			// 确认派车
			ok_btn_car_show_btn() {

				let that = this
				let ok_btn_car_data = that.ok_btn_car_data
				let params = {
					ids: [ok_btn_car_data.id]
				}

				that.$u.api.JLConfirmSend(params).then(res => {


					if (res.code == 1) {
						uni.$u.toast(res.msg);
						that.queryList();
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			ok_btn_car(e) {
				this.ok_btn_car_data = e
				this.ok_btn_car_show = true



			},
			// 线下派车
			btn_car2(e) {
				uni.removeStorageSync('carCompanyId');
				uni.navigateTo({
					url: '/order-man/charter-a-car/unassigned-vehicles/offline-vehicle-dispatch?id=' + e.id
				})
			},
			//线上派车
			btn_car(e) {
				uni.navigateTo({
					url: '/order-man/charter-a-car/unassigned-vehicles/online-vehicle-dispatch?id=' + e.id +
						'&seats=' + e.needSeats + '&startTime=' + e.startTime
				})
			},
			del_car_confirm() {
				let that = this

				that.$u.api.deleteOrder({
					ids: [that.del_car_id],
				}).then(res => {
					if (res.code == 1) {
						that.queryList();
						uni.showToast({
							icon: 'none',
							title: '删除成功',
							duration: 1000
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 2000
						});
					}
				});
			},
			del_car(e) {
				this.del_car_id = e.id
				this.del_car_off = true
			},
			receiveOrRefuse_ok_btn(e) {
				this.receiveOrRefuse_content = '确认非包车订单'
				this.receiveOrRefuse_data.id = e.id
				this.receiveOrRefuse_data.isReceiveByTeam = 1
				this.receiveOrRefuse_off = true
			},
			receiveOrRefuse_on_btn(e) {
				this.receiveOrRefuse_content = '拒绝非包车订单'
				this.receiveOrRefuse_data.id = e.id
				this.receiveOrRefuse_data.isReceiveByTeam = 0
				this.receiveOrRefuse_off = true
			},
			receiveOrRefuse_confirm() {
				let that = this

				that.$u.api.receiveOrRefuse(that.receiveOrRefuse_data).then(res => {
					if (res.code == 1) {
						that.queryList();
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 1000
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 1000
						});
					}
				});
			},

			showBzDetail(e) {


				uni.navigateTo({
					url: '/order-man/order-detail/order-detail?id=' + e
				})
			},

			selAlSeDate(e) {
				// console.log('起止日期选择事件', e);

				this.stime = e.st;
				this.etime = e.et;

				// 重新查询
				this.queryList();
			},
			// 查询数据
			queryList(page) {
				let that = this

				// 存在，则表示刷新
				if (!page) {
					// 开始刷新
					that.load.triggered = true;
					that.page.pageNum = 1;
				}
				const params = {
					page: {
						pageNum: that.page.pageNum,
						pageSize: that.page.pageSize,
					},
					statusList: ['NOT_GRAB', 'READY_CAR', 'CAR_READY_CONFIRME'],
					timeType: '0',
					orderByCondition: '0',
					stime: that.stime,
					etime: that.etime,
					details: that.details,
				}
				that.$u.api.getOrderProcessList(params).then(res => {
					// 第一页的时候，停止刷新
					if (!page) {
						// 停止刷新
						that.load.triggered = false;
						// 刷新则清空列表
						that.dataList = [];
					}
					if (res.code == 1) {
						if (res.data.list.total > res.data.list.list.length) {
							let dataList = res.data.list.list
							that.count = res.data.list.total
							// 追加数据
							if (that.dataList.length < that.count) {
								that.dataList = that.dataList.concat(dataList);
							} else {

							}


							that.load.status = that.dataList.length == that.count ? 'nomore' : 'loadmore';
						} else {
							let dataList = res.data.list.list
							// 追加数据
							that.dataList = dataList
							that.count = res.data.list.total
							// 设置加载状态
							that.load.status = that.dataList.length == that.count ? 'nomore' : 'loadmore';
						}

					}
				});
			},
			scroll: function(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				let that = this
				// 解决view层不同步的问题

				that.scrollTop = that.old.scrollTop

				that.$nextTick(function() {
					that.scrollTop = 0

				});


			},
			// 设置-底部上滑加载数据时状态显示
			tabReachBottom() {
				let that = this;

				// 数据已经加载完
				if (that.dataList.length == that.dataList.total) {
					// 设置加载状态为：没有更多了
					that.load.status = 'nomore';
				} else {
					// 设置加载状态为：加载中...
					that.load.status = 'loading';
					// 增加一页页码
					that.page.pageNum++;
					that.queryList(1);
				}
			},
			// 下拉刷新
			downPullRefres() {
				console.log(111)
				// 重新查询
				this.queryList();
			},
		}
	}
</script>

<style lang="scss">
	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			line-height: 52rpx;
			padding: 0rpx 16rpx;
			border-radius: 26rpx;
			border: 2rpx solid #ff9900;
			font-size: 26rpx;
			text-align: center;
			color: #ff9900;
			;
			margin-right: 10rpx;
		}

		.more {
			align-self: center;
			flex: 1;
			margin-right: 10rpx;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}

	.bottom2 {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
		align-items: center;

		.btn {
			line-height: 52rpx;
			padding: 0rpx 16rpx;
			border-radius: 26rpx;
			border: 2rpx solid #ff9900;
			font-size: 26rpx;
			text-align: center;
			color: #ff9900;
			;
			margin-right: 10rpx;
		}

		.more {
			align-self: center;
			flex: 1;
			margin-right: 10rpx;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}

	.content {
		.title {
			font-size: 28rpx;
			line-height: 50rpx;
		}

		.type {
			margin: 10rpx 0;
			font-size: 24rpx;
			color: $u-tips-color;

			.service-type {
				float: right;
			}
		}

		.delivery-time {
			color: #e5d001;
			font-size: 24rpx;
		}
	}

	.check-state-text {
		display: inline-block;
		padding: 0rpx 10rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}

	.tabs-wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		overflow-y: hidden;

		.tab-swiper-box {
			flex: 1;

			.tab-swiper-item {
				height: 100%;

				.page-box {
					padding-bottom: 80rpx;
				}
			}
		}
	}

	.list-tools {
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
		position: absolute;
		top: 180rpx;
		right: 0rpx;
		z-index: 99;

		.find-date {
			margin-right: 20rpx;
		}
	}
</style>